<template>
	<view id="app">
	    <!-- 状态栏 -->
	    <!-- 搜索头部 -->
	    <view class="search-header">
	      <view class="search-container">
	        <view class="search-icon">🔍</view>
	        <input 
	          v-model="searchQuery" 
	          @focus="onSearchFocus" 
	          @input="onSearchInput"
	          class="search-input" 
	          type="text" 
	          placeholder="请输入想要搜索的内容···"
	        >
	      </view>
	      <view @click="performSearch" class="cancel-btn">搜索</view>
	    </view>
	    
		<view>
			<!-- 历史记录 -->
	    <view v-if="showHistory" class="content-section">
	      <view class="section-title">
	        <view>历史记录</view>
	        <view @click="clearHistory" class="delete-icon">🗑️</view>
	      </view>
	      <view class="tags-container">
	        <view 
	          v-for="(tag, index) in historyTags" 
	          :key="index" 
	          @click="searchTag(tag)"
	          class="tag"
	        >
	          {{ tag }}
	        </view>
	      </view>
	    </view>
	    
	    <!-- 分割线 -->
	    <view v-if="showHistory" class="divider"></view>
	    
	    <!-- 热门搜索 -->
	    <view class="content-section">
	      <view class="section-title">
	        <view>热门搜索</view>
	      </view>
	      <view class="tags-container">
	        <view 
	          v-for="(tag, index) in hotTags" 
	          :key="index" 
	          @click="searchTag(tag)"
	          class="tag">
	          {{ tag }}
	        </view>
	      </view>
	    </view>
	  </view>
	</view>

	    
</template>

<script>
	export default{
	      data() {
	        return {
				searched:false,
	          searchQuery: '',
	          historyTags: [],
	          hotTags: ['AR', '汽车', '艺术', '设计', '大数据', '半导体', '新浪微博'],
	          showHistory: true
	        }
	      },
	      methods: {
			  getHistory(){
				  uni.getStorage({
					  key:"history",
					}).then(r=>{
						this.historyTags = r.data
					})
				  
			  },
			  saveHistory(){
				uni.setStorage({
					key:"history",
					data:this.historyTags
				})  
			  },
	        // 点击标签进行搜索
	        searchTag(tag) {
	          this.searchQuery = tag;
	          // this.performSearch();
	        },
	        
	        // 执行搜索
	        performSearch() {
	          if (this.searchQuery.trim()) {
				  this.addToHistory(this.searchQuery);
	            // alert(`正在搜索: ${this.searchQuery}`);
	            // 实际项目中这里应该是API调用
				console.log("正在执行");
				//跳转到
				uni.navigateTo({
					url:"/pages/router/search/searchResult?key=" + this.searchQuery,
				})
				this.saveHistory()
	          }
	        },
	        
	        // 添加到历史记录（如果尚未存在）
	        addToHistory(tag) {
	          if (!this.historyTags.includes(tag)) {
	            this.historyTags.unshift(tag);
	            if (this.historyTags.length > 10) {
	              this.historyTags.pop();
	            }
	          }
	        },
	        
	        // 清空历史记录
	        clearHistory() {
				let r = uni.showModal({'title':'确定要清空所有历史记录吗？'})
				console.log(r);
				r.then(r=>{
					if(r.confirm){
						this.historyTags = [];
					}
				})
	            
	          
	        },
	        
	        // 取消搜索
	        cancelSearch() {
	          this.searchQuery = '';
	        },
	        
	        // 当搜索输入框获得焦点
	        onSearchFocus() {
	          this.showHistory = true;
	        },
	        
	        // 当输入变化
	        onSearchInput() {
	          if (this.searchQuery.trim()) {
	            // 实现实时搜索的地方
	          }
	        }
	      },
		  onShow() {
		  	this.getHistory()
		  },
		  onUnload() {
		  	this.saveHistory()
		  }
	    }
</script>

<style>
	
	    * {
	      margin: 0;
	      padding: 0;
	      box-sizing: border-box;
	      font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
	    }
	    
	    body {
	      background-color: #f5f5f5;
	      color: #333;
	      max-width: 500px;
	      margin: 0 auto;
	      padding-bottom: 60px;
	    }
	    
	    /* 状态栏 */
	    .status-bar {
	      display: flex;
	      justify-content: center;
	      padding: 10px 15px;
	      font-size: 14px;
	      color: #000;
	      background: #fff;
	    }
	    
	    /* 搜索头部 */
	    .search-header {
	      display: flex;
	      align-items: center;
	      padding: 15px;
	      background: #fff;
	      border-bottom: 1px solid #e5e5e5;
	    }
	    
	    .search-container {
	      position: relative;
	      flex: 1;
	      margin-right: 15px;
	    }
	    
	    .search-icon {
	      position: absolute;
	      left: 12px;
	      top: 50%;
	      transform: translateY(-50%);
	      font-size: 18px;
	      color: #999;
	    }
	    
	    .search-input {
	      width: 100%;
	      padding: 10px 20px 10px 40px;
	      font-size: 16px;
	      border: none;
	      border-radius: 20px;
	      background-color: #f0f0f0;
		  outline: none;
	    }
	    
	    .cancel-btn {
			position: relative;
			width: 40px;
			height: 100%;
			z-index: 2;
	      font-size: 16px;
	      color: #06ae56;
	      background: none;
	      border: none;
	      cursor: pointer;
		  outline: none;
	    }
	    
	    /* 内容区域 */
	    .content-section {
	      background: #fff;
	      margin-top: 10px;
	      padding: 15px;
	    }
	    
	    .section-title {
	      display: flex;
	      justify-content: space-between;
	      align-items: center;
	      margin-bottom: 15px;
	      font-size: 16px;
	      color: #666;
	    }
	    
	    .delete-icon {
	      color: #999;
	      font-size: 20px;
	      cursor: pointer;
	    }
	    
	    .tags-container {
	      display: flex;
	      flex-wrap: wrap;
	      gap: 10px;
	    }
	    
	    .tag {
	      background: #f5f7f9;
	      border-radius: 16px;
	      padding: 6px 16px;
	      font-size: 14px;
	      color: #333;
	    }
	    
	    /* 分割线 */
	    .divider {
	      height: 8px;
	      background-color: #f0f0f0;
	    }
	    
	    /* 底部导航 */
	    .bottom-nav {
	      position: fixed;
	      bottom: 0;
	      left: 0;
	      right: 0;
	      max-width: 500px;
	      margin: 0 auto;
	      display: flex;
	      justify-content: space-around;
	      align-items: center;
	      padding: 10px 0;
	      background-color: #fff;
	      border-top: 1px solid #e5e5e5;
	    }
	    
	    .nav-item {
	      display: flex;
	      flex-direction: column;
	      align-items: center;
	      font-size: 12px;
	      color: #999;
	      cursor: pointer;
	    }
	    
	    .nav-icon {
	      font-size: 20px;
	      margin-bottom: 4px;
	    }
	    
	    .nav-item.active {
	      color: #06ae56;
	    }
	
</style>